<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .dv {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 200px auto;
            /* transform: rotate3d(1,1,0,-30deg);     制作时进行辅佐的 */
            transform-style: preserve-3d;
            transition: all 8s;        /*进行旋转*/
            /*perspective: 100px;       !*   透视的效果，101px则是距离立方体1px进行观察 *!*/
            /*perspective-origin: 0px 0px;    !*观察原点*!*/
        }
        /* .dv:hover{

            transform :rotateX(360deg) rotateY(360deg);

        } */
        .dv div {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border:1px solid ;
            position: absolute;
            top:0;
            left: 0;
            opacity: 0.5;
            transform-origin: center center;
        }

        .dv .mian1 {
            animation: wave 5s ease-out infinite;
        }
        .dv .mian2 {
            animation: circle2 5s ease-out infinite;
        }
        .dv .mian3 {
            animation: circle3 5s ease-out infinite;
        }
        .dv .mian4 {
            animation: circle4 5s ease-out infinite;
        }
        .dv .mian5 {
            animation: circle5 5s ease-out infinite;
        }
        .dv .mian6 {
            animation: circle6 5s ease-out infinite;
        } 


        /* .dv:hover .mian1 {
            transform : rotateY(360deg);
        }
        .dv:hover .mian2 {
            transform :rotateX(120deg) rotateY(360deg);
        }
        .dv:hover .mian3 {
            transform :rotateX(180deg) rotateY(360deg);
        }
        .dv:hover .mian4 {
            transform :rotateX(-60deg) rotateY(360deg);
        }
        .dv:hover .mian5 {
            transform :rotateX(-120deg) rotateY(360deg);
        }
        .dv:hover .mian6 {
            transform :rotateX(-180deg) rotateY(360deg);
        } */
        @keyframes wave {
            0% {
            -webkit-transform: rotate(0deg);
            }
            25% {
                transform: rotateX(80deg) rotateY(60deg)
            }
            50% {
                transform: rotateX(60deg) rotateY(30deg)
            }
            75% {
                transform: rotateX(30deg) rotateY(-30deg)
            }
            100% {
            -webkit-transform: rotateZ(-360deg);
            } 
        }
        @keyframes circle1 {
            0% {
                transform :rotateX(0deg) rotateY(60deg);
            }
            30% {
                transform :rotateX(30deg) rotateY(60deg);
            }
            50% {
                transform: rotateX(60deg) rotateY(30deg)
            }
            70% {
                transform :rotateX(30deg) rotateY(150deg);
            }
            100% {
                transform :rotateX(0deg) rotateY(0deg);
            }
        }
        @keyframes circle3 {
            0% {
            -webkit-transform: rotate(0deg);
            }
            25% {
                transform: rotateX(80deg) rotateY(60deg)
            }
            50% {
                transform: rotateX(60deg) rotateY(15deg)
            }
            75% {
                transform: rotateX(30deg) rotateY(0deg)
            }
            100% {
            -webkit-transform: rotateZ(-360deg);
            } 
        }
        @keyframes circle4 {
            0% {
            -webkit-transform: rotate(0deg);
            }
            25% {
                transform: rotateX(80deg) rotateY(60deg)
            }
            50% {
                transform: rotateX(60deg) rotateY(0deg)
            }
            75% {
                transform: rotateX(30deg) rotateY(-0deg)
            }
            100% {
            -webkit-transform: rotateZ(-360deg);
            } 
        }
        @keyframes circle2 {
            0% {
                -webkit-transform: rotate(0deg);
            }
            25% {
                transform: rotateX(60deg) rotateY(60deg)
            }
            50% {
                transform: rotateX(40deg) rotateY(155deg)
            }
            75% {
                transform: rotateX(30deg) rotateY(160deg)
            }
            100% {
                -webkit-transform: rotateZ(360deg);
            } 
        }
        @keyframes circle5 {
            0% {
                -webkit-transform: rotate(0deg);
            }
            25% {
                transform: rotateX(80deg) rotateY(60deg)
            }
            50% {
                transform: rotateX(40deg) rotateY(145deg)
            }
            75% {
                transform: rotateX(30deg) rotateY(145deg)
            }
            100% {
                -webkit-transform: rotateZ(360deg);
            } 
        }
        @keyframes circle6 {
            0% {
                -webkit-transform: rotate(0deg);
            }
            25% {
                transform: rotateX(80deg) rotateY(60deg)
            }
            50% {
                transform: rotateX(40deg) rotateY(175deg)
            }
            75% {
                transform: rotateX(30deg) rotateY(170deg)
            }
            100% {
                -webkit-transform: rotateZ(360deg);
            } 
        }
        i {
            list-style: none;
            display: block;
            width: 50px;
            height: 50px;
            /* background-color: red; */
            position: absolute;
            top:0;
            right: 0;
            border-top: 25px solid transparent;
            border-top-color: yellow;
            border-right: 25px solid #ccc;
            border-left: 25px solid green;
            border-bottom: 25px solid purple;
            border-radius: 50%;
            /* border: 25px solid #ccc; */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="dv">
        <div class="mian1">mian1</div>
        <div class="mian2">mian2</div>
        <div class="mian3">mian3</div>
        <div class="mian4">mian4</div>
        <div class="mian5">mian5</div>
        <div class="mian6">mian6</div>
        <i></i>
    </div>
    
</body>
</html>